<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/static/admin/lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/admin/css/public.css" media="all">
    <style>
        .layui-table-cell{
            height:50px;
            line-height: 50px;
        }
    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">

        <fieldset class="table-search-fieldset">
            <legend>快递单取号</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" action="">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">取号数量</label>
                            <div class="layui-input-inline">
                                <input type="number" name="expressNumber" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">起始单号</label>
                            <div class="layui-input-inline">
                                <input type="text" name="expressStartNum" autocomplete="off" class="layui-input" readonly>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">结束单号</label>
                            <div class="layui-input-inline">
                                <input type="text" name="expressEndNum" autocomplete="off" class="layui-input" readonly>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button type="submit" class="layui-btn layui-btn-primary"  lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 取 号</button>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>

        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-normal data-add-btn" lay-event="reload"> 刷新表格 </button>
                <button class="layui-btn layui-btn-danger data-delete-btn" lay-event="delete"> 多选删除 </button>
            </div>
        </script>

        <table class="layui-hide" id="expressRecordTableId" lay-filter="employeeTableFilter"></table>

        <script type="text/html" id="currentTableBar">
            <a class="layui-btn layui-btn-normal layui-btn-sm data-count-edit" lay-event="edit">发放网点</a>
            <a class="layui-btn layui-btn-sm layui-btn-danger data-count-delete" lay-event="delete">无效</a>
        </script>

    </div>
</div>
<!-- 面单分发弹窗div -->
<div style="display: none;" id="grantWindows">

    <div class="layui-form">

        <div class="layui-form-item">
            <div class="layui-inline">
                <div class="layui-card">
                    <div class="layui-card-header">说明</div>
                    <div class="layui-card-body">
                        <span style="color: red">先选择网点地址，后选择营业网点</span>
                    </div>
                </div>

            </div>

        </div>


        <!-- 隐藏面大取号表id -->
        <input type="hidden" name="expressRecordId" />
        <div class="layui-form-item" id="area-picker">
            <div class="layui-form-label required">网点地址</div>
            <div class="layui-input-inline" style="width: 200px;">
                <select name="province" class="province-selector" data-value="广东省" lay-filter="province-1">
                    <option value="">请选择省</option>
                </select>
            </div>
            <div class="layui-input-inline" style="width: 200px;">
                <select name="city" class="city-selector" data-value="深圳市" lay-filter="city-1">
                    <option value="">请选择市</option>
                </select>
            </div>
            <div class="layui-input-inline" style="width: 200px;">
                <select name="county" class="county-selector" data-value="龙岗区" lay-filter="county-1">
                    <option value="">请选择区</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">营业网点</label>
                <div class="layui-input-inline">
                    <select name="useObject" lay-verify="">

                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label required">发放数量</label>
                <div class="layui-input-inline">
                    <input type="number" name="grantCount" class="layui-input" readonly>
                </div>
            </div>

        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">面单号范围</label>
                <div class="layui-input-inline" style="width: 200px;">
                    <input type="text" name="expressGrantStartNum" placeholder="起始单号" class="layui-input" readonly>
                </div>
                <div class="layui-form-mid">-</div>
                <div class="layui-input-inline" style="width: 200px;">
                    <input type="text" name="expressGrantEndNum" placeholder="结束单号" class="layui-input" readonly>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block" style="width: 300px;">
                <textarea type="text" name="remark" placeholder="请输入备注" class="layui-textarea"></textarea>
            </div>

        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">发放格式</label>
                <div class="layui-input-block">
                    <select name="grantFormat">
                        <option value="箱">箱</option>
                        <option value="张">张</option>
                        <option value="号段">号段</option>
                    </select>
                </div>

            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-normal" lay-submit lay-filter="fetchRecordSubmit">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>

    </div>

</div>
<script src="/static/admin/lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script>
    //配置插件目录
    layui.config({
        base: '/static/admin/js/lay-module/layarea/'
        , version: '1.0'
    });
    layui.use(['form', 'table','jquery','layarea','layarea_lc'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table;
        var layarea = layui.layarea;;
        var layarea_lc = layui.layarea_lc;

        table.render({
            elem: '#expressRecordTableId',
            url: '/admin/expressSheet/queryExpressRecordInfo',
            toolbar: '#toolbarDemo',
            defaultToolbar: [],
            cols: [
                [
                {type: "checkbox"},
                {field: 'expressRecordId', title: 'ID'},
                {field: 'expressStartNum', title: '起始单号'},
                {field: 'expressEndNum', title: '结束单号'},
                {field: 'expressNumber', title: '取号数量'},
                {title: '操作员工',templet:function (res) {
                    var html = '<img src="'+res.faceImage+'" width="50" height="50" style="border-radius:100%; "/>'+res.employeeName;
                        return html;

                    }},
                {field: 'fetchDate', title: '取号时间',width:240},
                {field: 'start',title: '状态',templet:function (res) {

                    if (res.start == 0){
                        return '<span style="color: red;">未生效</span>';
                    } else if(res.start == 1){
                        return '<span style="color: green;">已生效</span>';
                    }else{
                        return '<span style="color: red;">已发放完</span>';
                    }

                    }},
                {title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center"}
            ]
            ],
            page: true
        });

        //监听取号数量输入框 内容
        $("input[name='grantCount']").bind('input property change', function()
        {

            //获取发放数量
            var count = $(this).data("count");
            //获取起始单号
            var startNum = $(this).data("startNum");

            if (parseInt($(this).val()) > count){

                $(this).val(count);

            }else if ($(this).val() == '0' || $(this).val() == '') {
                //赋值起始快递单号
                $("input[name='expressGrantStartNum']").val("");
                //赋值结束快递单号
                $("input[name='expressGrantEndNum']").val("");
            }


            //结束单号
            $("input[name='expressGrantEndNum']").val(parseInt(startNum)+parseInt($(this).val()));
            //起始单号
            $("input[name='expressGrantStartNum']").val(startNum);


        })

        /*//监听单号发放数量输入框 内容
        $("input[name='expressNumber']").bind('input property change', function()
        {
            if ($(this).val() == '0' || $(this).val() == '') {
                //赋值起始快递单号
                $("input[name='expressStartNum']").val("");
                //赋值结束快递单号
                $("input[name='expressEndNum']").val("");
            }else if(parseInt($(this).val()) > 100000){

                layer.msg("最多一次只可取100000个单号")
                $(this).val(100000);
            } else{

                //获取最新的快递单号
                $.ajax({
                    url:'/admin/expressSheet/queryNewExpressEndNum',
                    type:'get',
                    dataType:'json',
                    success:function (res) {

                        //获取取号数量
                        var expressNumber = $("input[name='expressNumber']").val();
                        //赋值起始快递单号
                        $("input[name='expressStartNum']").val(res.data+1);
                        //赋值结束快递单号
                        $("input[name='expressEndNum']").val(res.data+parseInt(expressNumber));

                    }
                })

            }



        })*/

        // 监听面单取号操作
        form.on('submit(data-search-btn)', function (data) {

            $.ajax({
                url:'/admin/expressSheet/addExpressNum',
                type:'post',
                data:data.field,
                dataType:'json',
                success:function(res){

                    if (res.code == 200){
                        layer.msg(res.message+",等待刷新表格中",function () {
                            $("input[name='expressNumber']").val("")
                            //赋值起始快递单号
                            $("input[name='expressStartNum']").val("");
                            //赋值结束快递单号
                            $("input[name='expressEndNum']").val("");

                            //刷新表格
                            table.reload('expressRecordTableId', {

                                url: '/admin/expressSheet/queryExpressRecordInfo'

                            });

                        });
                    }else{
                            layer.msg(res.message);
                        }
                    }

            })

            return false;
        });

        /**
         * toolbar监听事件
         */
        table.on('toolbar(employeeTableFilter)', function (obj) {
            if (obj.event === 'reload') {  // 监听刷新表格操作

                //刷新表格
                table.reload('expressRecordTableId', {
                    url: '/admin/expressSheet/queryExpressRecordInfo'

                });


            } else if (obj.event === 'delete') {  // 监听多选删除操作
                var checkStatus = table.checkStatus('expressRecordTableId')
                    , data = checkStatus.data;

                if (data.length == 0){
                    layer.msg("您还没有选择哟")
                    return false;
                }
                var arrayId = [];
                //获取所有的取号表id
                $.each(data,function (index,item) {

                    arrayId.push(item.expressRecordId)

                })


                $.ajax({
                    url:'/admin/expressSheet/batchDeleteExpressFetch',
                    type:'post',
                    data:{
                        expressIds:arrayId.join("-")
                    },
                    dataType:'json',
                    success:function (res) {

                        layer.msg(res.message+",正在刷新",function () {
                            //刷新表格
                            table.reload('expressRecordTableId', {
                                url: '/admin/expressSheet/queryExpressRecordInfo'

                            });
                        })

                    }
                })

            }
        });

        //监听表格复选框选择
        table.on('checkbox(employeeTableFilter)', function (obj) {
            console.log(obj)
        });

        //监听行工具
        table.on('tool(employeeTableFilter)', function (obj) {
            var data = obj.data;
            if (data.start == 2){
                layer.msg("已发放完快递单号")
                return false;
            }

            if (obj.event === 'edit') { //发放网点

                var index = layer.open({
                    title: '发放单号',
                    type: 1,
                    content: $('#grantWindows'),
                    area:['800px','600px'],
                    success:function (res) {

                        //刷新出地区联动下拉框
                        layarea_lc.render({
                            elem: '#area-picker',
                            change: function (res) {

                                console.log(res);

                                //选择结果
                                if (res.county.trim() != '' || res.county != null){

                                    $.ajax({
                                        url:'/admin/expressSheet/queryNetAreaSite',
                                        type:'get',
                                        data:{
                                            areaId:res.county
                                        },
                                        dataType:'json',
                                        success:function (res) {
                                            var html = '';
                                            $.each(res.data,function (index,item) {

                                                html+='<option value="'+item.siteId+'">'+item.siteName+'</option>';

                                            })

                                            $("select[name='useObject']").html(html);

                                            form.render(); //更新全部
                                        }
                                    })

                                }

                            }
                        });

                        console.log(data);
                        //获取这中间号端的差
                        var num = data.expressEndNum - data.expressStartNum;

                        //给发放数量赋值
                        $("input[name='grantCount']").val(data.expressNumber);
                        //结束单号
                        $("input[name='expressGrantEndNum']").val(data.expressEndNum);
                        //起始单号
                        $("input[name='expressGrantStartNum']").val(data.expressStartNum);
                        //给隐藏input赋值
                        $("input[name='expressRecordId']").val(data.expressRecordId);

                    }
                });

            } else if (obj.event === 'delete') {
                console.log(data)
                layer.confirm('真的要设置面单号无效吗?', function (index) {

                    if (data.start != 1){
                        layer.msg("此面单号不可更改无效")
                        return false;
                    }

                    $.ajax({
                        url:'/admin/expressSheet/updateExpressGrantStart',
                        type:'post',
                        data:{
                            expressRecordId:data.expressRecordId
                        },
                        dataType:'json',
                        success:function (res) {

                            layer.msg(res.message,function () {
                                //刷新表格
                                table.reload('expressRecordTableId', {
                                    url: '/admin/expressSheet/queryExpressRecordInfo'

                                });
                            });

                        }
                    })

                    layer.close(index);
                });
            }
        });

        <!-- 发放营业网点表单提交监控 -->
        form.on('submit(fetchRecordSubmit)', function(data){

            if (data.field.useObject == '' || data.field.useObject ==null){
                layer.msg("营业网点还没有选择哦！")
                return false;
            }

            $.ajax({
                url:'/admin/expressSheet/addExpressGrant',
                type:'post',
                data:data.field,
                dataType:'json',
                success:function (res) {

                    if (res.code == 200){
                        layer.msg(res.message+'等待刷新中...',function () {

                            //刷新表格
                            table.reload('expressRecordTableId', {

                                url: '/admin/expressSheet/queryExpressRecordInfo'

                            });

                            layer.closeAll('page'); //关闭所有页面层
                        });
                    }else{
                        layer.msg(res.message)
                    }


                }
            })


            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

    });
</script>

</body>
</html>
